import "./detailscourse.css"
import React, { useRef } from 'react';
import { Link, useNavigate, useParams } from "react-router-dom"
import { getDetailsCourse, getDetailsList } from "../../api/home"
import { Toast } from 'antd-mobile'

function Detailscourse() {
    let params = useParams(); //获取链接数据
    let navigate = useNavigate();//链接跳转

    // 课程收藏
    let [classflag, EditClass] = React.useState(true)
    let [classlist, SetList] = React.useState([])

    // 集数存储
    let [videoIndex, SetVideoIndex] = React.useState([])

    //全部数据
    let [detailsCourse, setDetailsCourse] = React.useState(null);

    //首次视频播放信息下标
    let [detailsVideo, setDetailsVideo] = React.useState(0);

    //相关推荐信息
    let [detailsList, setDetailsList] = React.useState(null);

    // 加载更多
    let [moreNum, editMoreNum] = React.useState(10)

    React.useEffect(() => {
        let arr = JSON.parse(localStorage.getItem("class"))
        let arrs = JSON.parse(localStorage.getItem("videoIndex"))
        console.log(arrs);
        SetVideoIndex(arrs)
        SetList(arr)
        console.log(moreNum);
        // 所有详情
        getDataAll(params.id)
        getDetailsCourse(params.id).then(data => {

            arr.map(item => {
                if (item.series_id == data.data.series_id) {
                    EditClass(false)
                }
            })
            arrs.map(item => {
                if (item.id == data.data.series_id) {
                    setDetailsVideo(item.index)
                }
            })
        })

    }, [])

    const editVideo = (id) => {
        pageView.current.scrollTop = 0;

        setDetailsVideo(id - 1)
        if (classflag == false) {
            classlist = classlist.filter(item => {
                return item.series_id != detailsCourse.series_id
            })

            SetList(classlist)

            detailsCourse = Object.assign({}, detailsCourse, {
                videoId: id - 1

            });
            classlist.push(detailsCourse)
            SetList(classlist)
            localStorage.setItem('class', JSON.stringify(classlist))
        }
    }

    const goNewVideo = (id) => {
        pageView.current.scrollTop = 0;

        setDetailsVideo(id - 1)

        if (classflag == false) {
            classlist = classlist.filter(item => {
                return item.series_id != detailsCourse.series_id
            })

            SetList(classlist)

            detailsCourse = Object.assign({}, detailsCourse, {
                videoId: id - 1

            });
            classlist.push(detailsCourse)
            SetList(classlist)
            localStorage.setItem('class', JSON.stringify(classlist))
        }
    }

    const pageView = useRef(null);
    // 加载更多
    const moreVideo = () => {
        moreNum += 10
        console.log(moreNum);
        editMoreNum(moreNum)
        getDetailsList(params.id, moreNum).then(data => {
            setDetailsList(data.data.list)
        })
    }

    const getDataAll = (id) => {
        getDetailsCourse(id).then(data => {
            setDetailsCourse(data.data)
            console.log(data.data);
            console.log("http://video" + data.data.course_list[detailsVideo].video.slice(10, 60));
            // setDetailsInfo(data.data.album_info)
            // setDetailsInfo(data.data.course_list)
        })
        getDetailsList(id, moreNum).then(data => {
            setDetailsList(data.data.list)
            console.log(data.data.list);
        })
    }
    // 返回 存储集
    const goBack = () => {
        navigate(-1)
        videoIndex = videoIndex.filter(item => {
            return item.id != detailsCourse.series_id
        })
        videoIndex.push({
            id: detailsCourse.series_id,
            index: detailsVideo
        })
        SetVideoIndex(videoIndex)
        localStorage.setItem('videoIndex', JSON.stringify(videoIndex))

    }
    // 收藏
    const addclass = () => {
        let login = window.localStorage.getItem("token")
        if (!login) {
            Toast.show('请先登录')
            navigate('/loginpass')
        } else {
            EditClass(false)
            detailsCourse = Object.assign({}, detailsCourse, {
                videoId: detailsVideo

            });
            classlist.push(detailsCourse)
            SetList(classlist)
            localStorage.setItem('class', JSON.stringify(classlist))
        }

    }
    // 取消收藏
    const clearclass = () => {
        EditClass(true)
        classlist = classlist.filter(item => {
            return item.series_id != detailsCourse.series_id
        })
        SetList(classlist)
        localStorage.setItem("class", JSON.stringify(classlist))

    }
    return detailsCourse ? (
        <div className="detailscourse" ref={pageView} style={{ height: '100vh', overflow: "scroll" }}>
            <div className="header">

                <div className="header-wrap">
                    <i onClick={goBack} className="iconfont icon-zuobian"></i>
                    <div className="title">
                        {detailsCourse.series_name}
                    </div>
                    {
                        classflag ? (<img src="../../assets/img/icon_main_collection.png" onClick={addclass}></img>) : (<img src="../../assets/img/icon_main_collection_sel.png" onClick={clearclass}></img>)
                    }

                </div>

            </div>

            {/* 视频 */}
            <div className="video">
                <video src={"http://video" + detailsCourse.course_list[detailsVideo].video.slice(10, 60)} autoPlay muted controls />
            </div>

            {/* 课程详细介绍 */}
            <div className="goods-show">
                <div className="goods-desc">
                    <h5>{detailsCourse.course_list[detailsVideo].course_name}</h5>
                    <p> {detailsCourse.course_list[detailsVideo].course_subject}</p>
                </div>
                <Link to={'/detailsuser/' + detailsCourse.album_id}>
                    <div className="user">

                        <div className="img">
                            <img src={detailsCourse.album_info.album_logo} />
                        </div>
                        <div className="content">
                            <p className="title">{detailsCourse.album_info.album_name}</p>
                            <p className="txt text_row_hidden">{detailsCourse.album_info.album_desc
                            }</p>
                        </div>
                        <i className="iconfont icon-youbian"></i>
                    </div>
                </Link>

                <div className="course">
                    <div className="title">
                        <div className="line"></div>
                        <h5>课程选集</h5>
                        <span>（课程可单独购买）</span>
                    </div>
                    <div className="courseList">
                        <ul>
                            {
                                detailsCourse.course_list.map(item => {
                                    return (

                                        <li key={item.course_id} className={`${item.episode == detailsVideo + 1 ? 'active' : ''}`} onClick={editVideo.bind(this, item.episode)}>{item.episode
                                        }</li>

                                    )
                                })
                            }
                        </ul>
                    </div>

                    <div className="introduction">
                        <div className="title">
                            <div className="line"></div>
                            <h5>课程简介</h5>
                        </div>
                        <div className="context">暂无简介</div>
                    </div>

                    <div className="catalogue">
                        <div className="title">
                            <div className="line"></div>
                            <h5>课程目录</h5>
                            <span>（更新至{detailsCourse.new_episode}集 上课人数：{detailsCourse.watchcount}）</span>
                        </div>
                        <div className="content">
                            <ul>
                                {
                                    detailsList && detailsList.map(item => {
                                        return (
                                            <li key={item.course_id} onClick={goNewVideo.bind(this, item.episode)}>
                                                <div className='u-img'>
                                                    <img src={item.course_image} />
                                                    <i className='icon'></i>
                                                    {/* <div className="time">02:02</div> */}
                                                </div>
                                                <div className='u-info'>
                                                    <p>{item.course_name}</p>
                                                </div>

                                            </li>
                                        )
                                    })
                                }

                            </ul>
                            {
                                moreNum < detailsCourse.course_list.length ? (<p className="more" onClick={moreVideo}> 加载更多</p>) : ("")
                            }

                        </div>
                    </div>

                    <div className="recommend">
                        <div className="title">
                            <div className="line"></div>
                            <h5>相关推荐</h5>
                        </div>
                        <div className="content">
                            <ul>
                                {
                                    detailsCourse.series_list.map(item => {
                                        return (
                                            <li key={item.series_id}>
                                                <div className='img'>
                                                    <img src={item.series_image} />
                                                    <span className='icons'>专辑</span>
                                                    <i className='icon'></i>
                                                    <span className='video-count'>{item.course_num}个视频</span>
                                                </div>
                                                <div className='text'>
                                                    <h2>#{item.series_name}#</h2>
                                                    <span>{item.series_title}</span>
                                                </div>
                                            </li>
                                        )
                                    })

                                }

                                {/* <li>
                                    <div className='img'>
                                        <img src="http://img.szzhangchu.com/1542191707661_9797757486.jpg" />
                                        <span className='icons'>专辑</span>
                                        <i className='icon'></i>
                                        <span className='video-count'>52个视频</span>
                                    </div>
                                    <div className='text'>
                                        <h2>#夏夏和秋秋的小厨房#</h2>
                                        <span>夏夏秋秋 好好吃饭 好好生活</span>
                                    </div>
                                </li> */}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ) : null;
}

export default Detailscourse;
